<template>
    <div class="swiper-container" ref="floorSwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carousel,index) in list" :key="carousel.id">
                <!-- <img src="@/assets/img/main-picture1.png" /> -->
                <img :src="carousel.imgUrl" />
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from "swiper";
export default {
    name: "Carousel",
    props: ["list"],
    data() {
        return {};
    },
    watch: {
        list: {
            immediate: true,
            handler() {
                this.$nextTick(() => {
                    var mySwiper = new Swiper(this.$refs.floorSwiper, {
                        direction: "horizontal",
                        loop: true, // 循环模式选项
                        grabCursor: true,
                        // 如果需要分页器
                        pagination: {
                            el: ".swiper-pagination",
                            type: "bullets",
                            clickable: true,
                            dynamicBullets: true,
                            
                        },
                        // 自动播放
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: true,
                        },
                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: ".swiper-button-next",
                            prevEl: ".swiper-button-prev",
                        },
                    });
                    // 让一开始就隐藏，毕竟不会一开始鼠标就在轮播图内部
                    mySwiper.navigation.$nextEl.addClass("swiper-button-hide");
                    mySwiper.navigation.$prevEl.addClass("swiper-button-hide");
                    // 配置鼠标进入和移出停止轮播
                    mySwiper.el.onmouseover = function () {
                        mySwiper.autoplay.stop();
                        mySwiper.navigation.$nextEl.removeClass(
                            "swiper-button-hide"
                        );
                        mySwiper.navigation.$prevEl.removeClass(
                            "swiper-button-hide"
                        );
                    };
                    mySwiper.el.onmouseout = function () {
                        mySwiper.autoplay.start();
                        mySwiper.navigation.$nextEl.addClass(
                            "swiper-button-hide"
                        );
                        mySwiper.navigation.$prevEl.addClass(
                            "swiper-button-hide"
                        );
                    };
                });
            },
        },
    },
};
</script>

<style scoped>
.swiper-container{
    --swiper-navigation-color: rgb(91,81,69);/* 单独设置按钮颜色 */
    --swiper-pagination-color: rgb(91,81,69);/* 两种都可以 */
  }

img {
    width: 100%;
    height: 100%;
}

.swiper-button-hide {
    display: none;
}
</style>